<script setup name="TreeSelectMany">
import {dictGetList} from "@/api/sys/dict";
import {example3GetTreeList,example3EditTree} from "@/api/sys/example3";
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance();
const treeSelectManyRef = ref(null);
const props = defineProps({
  searchType:{
    type: Number,
    default: 1
  },
  // 父类
  ancestors: {
    type: String,
    default: null
  },
  //  关键字名称
  id: {
    type: Number,
    default: null
  },
  name: {
    type: String,
    default: "",
  }
});

let pd = reactive({
  treeList: [],
  checkedKeys: [],
  open: false,
  expand: false,
  nodeAll: false,
  checkStrictly: true,
  queryParams: {
    id: null,
    ancestors: null
  }
});

defineExpose({
  show, getAllCheckedKeys
});

function show(){
  // 数据都准备好了，外部调用部署
  dictGetList({ancestors:props.ancestors}).then(res => {
    pd.treeList = proxy.handleTree(res.data, 'id', 'parentId', 'children');
    setTreeChecked();
  });
  pd.open = true;
}
function setTreeChecked(){
  example3GetTreeList({id:props.id}).then(res =>{
    pd.checkedKeys = res.data;
    pd.checkedKeys.forEach((v) => {
      treeSelectManyRef.value.setChecked(v, true, false);
    });
  });
}

/** 树权限（展开/折叠）*/
function handleCheckedTreeExpand(value) {
  let treeList = pd.treeList;
  for (let i = 0; i < treeList.length; i++) {
    treeSelectManyRef.value.store.nodesMap[treeList[i].id].expanded = value;
  }
}

/** 树权限（全选/全不选） */
function handleCheckedTreeNodeAll(value) {
  treeSelectManyRef.value.setCheckedNodes(value ? pd.treeList : []);
}

/** 树权限（父子联动） */
function handleCheckedTreeConnect(value) {
  pd.checkStrictly = value ? true : false;
}

/** 所有节点数据 */
function getAllCheckedKeys() {
  // 目前被选中的节点
  let checkedKeys = treeSelectManyRef.value.getCheckedKeys();
  // 半选中的节点
  let halfCheckedKeys = treeSelectManyRef.value.getHalfCheckedKeys();
  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
  return checkedKeys;
}

/** 提交按钮 */
function submitForm() {
  let checkedKeys;
  checkedKeys = getAllCheckedKeys();
  example3EditTree({id:props.id,treeChecked:checkedKeys}).then(res =>{
    proxy.$modal.msgSuccess("新增成功");
    pd.open = false;
  });
}

</script>

<template>

  <el-link v-if="props.searchType===1" type="primary" @click="show" >
    {{ props.name }}
  </el-link>
  <!-- 添加或修改样例代码对话框 -->
  <el-dialog title="样例关联tree" v-model="pd.open" width="400px" append-to-body>
    <el-checkbox v-model="pd.expand" @change="handleCheckedTreeExpand">展开/折叠</el-checkbox>
    <el-checkbox v-model="pd.nodeAll" @change="handleCheckedTreeNodeAll">全选/全不选</el-checkbox>
    <el-checkbox v-model="pd.checkStrictly" @change="handleCheckedTreeConnect">父子联动</el-checkbox>
    <el-tree class="tree-border" :data="pd.treeList" show-checkbox ref="treeSelectManyRef" node-key="id"
             :check-strictly="!pd.checkStrictly" empty-text="加载中，请稍候"
             :props="{ label: 'name', children: 'children' }"></el-tree>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="success" @click="submitForm">修 改</el-button>
        <el-button type="info" @click="pd.open = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>